Typography
<typography name>
<add typography name here> : Typography
Dark / Light mode
Label
Button
Button
Page Title
1
2
3
9
Label
Label
Restricted
Accepted
In-progress
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
fastn
LabelLabelLabelLabelLabel
Button
Button
We transform ideas into digital outcomes.
We are an award-winning strategic design company that provides consultancy services and help you create outstanding digital products.
Button
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
2,729 Like
273 Comment
Mauris ullamcorper tortor sed purus interdum, fermentum efficitur est dictu.
Patrica AVA
UI Designer
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Heading
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Footer Link 01
Fastn
Copyright © 2023 - FifthTry.com
Label
Button
Fastn
Home
Pocket
History
New
6
Service
Credit
Transfer
Cash
My Bills
2
Saved
Adding warmth and energy to your pages with the <add typography name here>
<repo_name> refers to the art and technique of arranging typefaces (fonts) in a visually appealing and effective manner. It involves the design, selection, and arrangement of various elements such as typefaces, letterforms, line spacing, line length, and other typographic elements to create visually appealing and readable text.
{
"default-colors-light": {
  "Accent Colors": {
    "primary": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "secondary": {
      "value": "#4fb2df",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#e7e7e4",
      "type": "color"
    },
    "code": {
      "value": "#f5f5f5",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#f3f3f3",
      "type": "color"
    },
    "step-2": {
      "value": "#c9cece",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border-disabled": {
      "value": "#feffff",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "focused": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "hover": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "pressed": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text-disabled": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "border": {
      "value": "#2b8074",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(44, 201, 181, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#2cbfac",
      "type": "color"
    },
    "hover": {
      "value": "#2c9f90",
      "type": "color"
    },
    "pressed": {
      "value": "#2cc9b5",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#4fb2df",
      "type": "color"
    },
    "border": {
      "value": "#209fdb",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(79, 178, 223, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#4fb1df",
      "type": "color"
    },
    "hover": {
      "value": "#40afe1",
      "type": "color"
    },
    "pressed": {
      "value": "#4fb2df",
      "type": "color"
    },
    "text": {
      "value": "#584b42",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#556375",
      "type": "color"
    },
    "border": {
      "value": "#e2e4e7",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(85, 99, 117, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#e0e2e6",
      "type": "color"
    },
    "hover": {
      "value": "#c7cbd1",
      "type": "color"
    },
    "pressed": {
      "value": "#3b4047",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#d554b3",
      "type": "color"
    },
    "five": {
      "value": "#eb57be",
      "type": "color"
    },
    "four": {
      "value": "#7a65c7",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#ed753a",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#8fdcf8",
      "type": "color"
    },
    "two": {
      "value": "#f3db5f",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#f5bdbb",
      "type": "color"
    },
    "border": {
      "value": "#df2b2b",
      "type": "color"
    },
    "text": {
      "value": "#c62a21",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#c4edfd",
      "type": "color"
    },
    "border": {
      "value": "#205694",
      "type": "color"
    },
    "text": {
      "value": "#205694",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#434547",
      "type": "color"
    },
    "border-strong": {
      "value": "#919192",
      "type": "color"
    },
    "scrim": {
      "value": "#007f9b",
      "type": "color"
    },
    "shadow": {
      "value": "#007f9b",
      "type": "color"
    },
    "text": {
      "value": "#584b42",
      "type": "color"
    },
    "text-strong": {
      "value": "#141414",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#e3f0c4",
      "type": "color"
    },
    "border": {
      "value": "#3d741f",
      "type": "color"
    },
    "text": {
      "value": "#467b28",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fbefba",
      "type": "color"
    },
    "border": {
      "value": "#966220",
      "type": "color"
    },
    "text": {
      "value": "#966220",
      "type": "color"
    }
  }
},
"default-colors-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "secondary": {
      "value": "#4fb2df",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#18181b",
      "type": "color"
    },
    "code": {
      "value": "#21222c",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#141414",
      "type": "color"
    },
    "step-2": {
      "value": "#585656",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border-disabled": {
      "value": "#feffff",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "focused": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "hover": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "pressed": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text-disabled": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "border": {
      "value": "#2b8074",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(44, 201, 181, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#2cbfac",
      "type": "color"
    },
    "hover": {
      "value": "#2c9f90",
      "type": "color"
    },
    "pressed": {
      "value": "#2cc9b5",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#4fb2df",
      "type": "color"
    },
    "border": {
      "value": "#209fdb",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(79, 178, 223, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#4fb1df",
      "type": "color"
    },
    "hover": {
      "value": "#40afe1",
      "type": "color"
    },
    "pressed": {
      "value": "#4fb2df",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#556375",
      "type": "color"
    },
    "border": {
      "value": "#e2e4e7",
      "type": "color"
    },
    "border-disabled": {
      "value": "#65b693",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(85, 99, 117, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#e0e2e6",
      "type": "color"
    },
    "hover": {
      "value": "#c7cbd1",
      "type": "color"
    },
    "pressed": {
      "value": "#3b4047",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-disabled": {
      "value": "#65b693",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#d554b3",
      "type": "color"
    },
    "five": {
      "value": "#eb57be",
      "type": "color"
    },
    "four": {
      "value": "#7a65c7",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#ed753a",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#8fdcf8",
      "type": "color"
    },
    "two": {
      "value": "#f3db5f",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#311b1f",
      "type": "color"
    },
    "border": {
      "value": "#df2b2b",
      "type": "color"
    },
    "text": {
      "value": "#c62a21",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#15223a",
      "type": "color"
    },
    "border": {
      "value": "#205694",
      "type": "color"
    },
    "text": {
      "value": "#1f6feb",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#434547",
      "type": "color"
    },
    "border-strong": {
      "value": "#919192",
      "type": "color"
    },
    "scrim": {
      "value": "#007f9b",
      "type": "color"
    },
    "shadow": {
      "value": "#007f9b",
      "type": "color"
    },
    "text": {
      "value": "#a8a29e",
      "type": "color"
    },
    "text-strong": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#405508ad",
      "type": "color"
    },
    "border": {
      "value": "#3d741f",
      "type": "color"
    },
    "text": {
      "value": "#479f16",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#544607a3",
      "type": "color"
    },
    "border": {
      "value": "#966220",
      "type": "color"
    },
    "text": {
      "value": "#d07f19",
      "type": "color"
    }
  }
}
}
colors.json
Lang:
json
Developed Using
fastn
Github Link
github.com/fastn-community/typography-doc
License Information
BSD 3-Clause License
Author Information
Contributors
Discord Channel
discord.gg/bucrdvptYd
How to use this typography
How to use?

How to use this typography

To start, you can choose from existing typography packages or create your own custom typography. To apply a typography package on top of your package, you’ll need to import it into one of the module.

For example, let’s say you’re using the page component from doc-site package and want to apply the <repo_name> package on top of it.

To use <repo_name> into your fastn web project, add below into FASTN.ftd file:
-- fastn.dependency: fastn-community.github.io/arya-typography
Lang:
ftd

Option 1: for documentation templates like doc-site

To add typography to your fastn web sites. Edit your FASTN.ftd file and add arya-typography dependency into it.
-- fastn.dependency: fastn-community.github.io/arya-typography
Lang:
ftd

Now modify FASTN/ds.ftd module which is already added inside your fastn package.

Import arya-typography dependency into FASTN/ds.ftd
-- import: fastn-community.github.io/arya-typography
Lang:
ftd

Change -- component page typography property ftd.type-data typography: $roboto-typography.types with ftd.type-data typography: $arya-typography.types

replace this line of FASTN/ds.ftd file:
-- ftd.type-data typography: $roboto-typography.types
Lang:
ftd
with:
-- ftd.type-data typography: $arya-typography.types
Lang:
ftd
Done! now deploy your fastn package, you’ll see arya-typography applied to your pages.
Option 2: for custom fastn projects
Import arya-typography inside your ftd file
-- import: fastn-community.github.io/arya-typography
Lang:
ftd
Now add $arya-typography.types to your component, as shown in below example:
Copy below code snippet inside your ftd file, then deploy and test
-- example: This is example of types used from `arya-typography`

-- component example:
caption title:
ftd.type-data types: $arya-typography.types

-- ftd.text: $example.title
role: $inherited.types.heading-hero
color: $inherited.colors.text

-- end: example
Lang:
ftd
Done! now deploy your fastn package, you’ll see arya-typography applied to your pages.

Headings

heading hero
$inherited.types.heading-hero
The quick brown fox jumps over the lazy dog.
Mobile:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
700
|
font-weight:
700
|
line-height:
700
|
letter-spacing:
700
Desktop:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
700
|
font-weight:
700
|
line-height:
700
|
letter-spacing:
700
heading large
$inherited.types.heading-large
The quick brown fox jumps over the lazy dog.
Mobile:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
700
|
font-weight:
700
|
line-height:
700
|
letter-spacing:
700
Desktop:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
700
|
font-weight:
700
|
line-height:
700
|
letter-spacing:
700
heading medium
$inherited.types.heading-medium
The quick brown fox jumps over the lazy dog.
Mobile:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
600
|
font-weight:
600
|
line-height:
600
|
letter-spacing:
600
Desktop:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
600
|
font-weight:
600
|
line-height:
600
|
letter-spacing:
600
heading small
$inherited.types.heading-small
The quick brown fox jumps over the lazy dog.
Mobile:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
500
|
font-weight:
500
|
line-height:
500
|
letter-spacing:
500
Desktop:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
500
|
font-weight:
500
|
line-height:
500
|
letter-spacing:
500
heading tiny
$inherited.types.heading-tiny
The quick brown fox jumps over the lazy dog.
Mobile:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
500
|
font-weight:
500
|
line-height:
500
|
letter-spacing:
500
Desktop:
font-family:
fastn-community-github-io-arya-font-Arya
|
font-size:
500
|
font-weight:
500
|
line-height:
500
|
letter-spacing:
500

Copy

Button

Label

Specialized Text

Get in touch!
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
GitHub:
github.com/fastn-stack/fastn
Discord:
discord.gg/bucrdvptYd
Tutorials:
fastn.com/expander/hello-world/-/build/
Copyright © 2023 - FifthTry
Powered by